<!-- 执行器弹窗 -->
<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { IDbFormItem } from '@/types/global'
import DuiForm from '@/common-ui/dui-form/index.vue'
import * as taskApi from '@/api/task'
import useNotic from '@/hooks/useNotic'
import { ENUM_TASK_EXECUTOR_RIGISTER_TYPE, TASK_EXECUTOR_RIGISTER_TYPES } from '../config/config'
import type { ITaskExecutor } from '../config/type'

const emits = defineEmits(['refresh'])

defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
})

// 详情id
const infoId = ref('')
// 弹窗表单数据
const ruleFormRef = ref<InstanceType<typeof DuiForm>>()
// 表单配置
const formConfig = computed<IDbFormItem[]>(() => {
  const configList: IDbFormItem[] = [
    { label: 'appName', prop: 'appname', type: 'input', required: true, span: 24 },
    { label: '名称', prop: 'title', type: 'input', required: true, span: 24 },
    {
      label: '注册方式',
      prop: 'addressType',
      type: 'radio',
      required: true,
      span: 24,
      list: TASK_EXECUTOR_RIGISTER_TYPES,
      change: () => {
        if (formData.value.addressType == ENUM_TASK_EXECUTOR_RIGISTER_TYPE['自动注册']) {
          formData.value.addressList = ''
        }
      }
    },
    {
      label: '机器地址',
      tip: '多个地址用英文逗号隔开',
      prop: 'addressList',
      type: 'textarea',
      hide: formData.value.addressType == ENUM_TASK_EXECUTOR_RIGISTER_TYPE['自动注册'],
      required: formData.value.addressType == ENUM_TASK_EXECUTOR_RIGISTER_TYPE['手动录入'],
      span: 24
    }
  ]
  return configList
})
// 表单默认数据
const defaultData: ITaskExecutor = {
  appname: '',
  title: '',
  addressType: ENUM_TASK_EXECUTOR_RIGISTER_TYPE['手动录入'],
  addressList: ''
}
// 表单数据
const formData = ref<ITaskExecutor>(JSON.parse(JSON.stringify(defaultData)))
// 是否显示弹窗
const showDialog = ref(false)

/**
 * 打开弹窗并初始化数据
 */
function init(data?: any) {
  infoId.value = data?.id ?? ''
  const resData: any = data || {}
  const defaultForm = JSON.parse(JSON.stringify(defaultData as any))
  Object.keys(defaultForm).forEach((key) => {
    ;(formData.value as any)[key] = resData[key] ?? defaultForm[key]
  })
  showDialog.value = true
}

/**
 * 点击提交
 */
function submitClick() {
  ruleFormRef.value
    ?.validate()
    .then(() => {
      let reqFunc = taskApi.addTaskExecutor
      let params: any = formData.value
      if (infoId.value) {
        reqFunc = taskApi.editTaskExecutor
        params = { ...formData.value, id: infoId.value }
      }
      reqFunc(params).then((res) => {
        if (res.success) {
          useNotic().success('提交成功')
          showDialog.value = false
          emits('refresh')
        }
      })
    })
    .catch(() => {})
}

defineExpose({
  init
})
</script>

<template>
  <dui-dialog v-model="showDialog" :title="title">
    <dui-form ref="ruleFormRef" :form-config="formConfig" :form-data="formData" :disabled="disabled" />
    <template #footer>
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="submitClick" v-if="!disabled"> 确定 </el-button>
    </template>
  </dui-dialog>
</template>
